<template>
  <!-- 抄送人模块 -->
  <div class="box">
    <div class="ini_box">
      <div class="title">
        <div>
          <i class="el-icon-user"></i>
          <input class="makeName" type="text" v-model="makeName" :disabled='isDisabled'>
        </div>
        <i class="el-icon-close close"></i>
      </div>
      <div class="cen">
        <div class="cenText">
          {{cenText}}
        </div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      
    </div>
    <add :nodeInfo='info'></add>
  </div>
</template>

<script>
import add from '../addNode.vue' // 新增节点组件
export default {
  components:{
    add
  },
  props:['info'],
  data(){
    return {
      cenText:'抄送人啦啦啦',
      makeName:'抄送人1',
      isDisabled:true,
    }
  },
  mounted(){
    this.makeName = this.info.name
  }
}
</script>

<style scoped>
.box{
  position: relative;
  cursor: pointer;
}
.ini_box{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
}
.ini_box:hover{
  border: 1px solid #1d9cf1;
}
.box:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  border-style: solid;
  border-width: 8px 6px 4px;
  border-color: #cacaca transparent transparent;
  background: #e6e6e6;
}
.title{
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #2c85da;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.close{
  font-size: 18px;
  cursor: pointer;
}
.cen{
  display: flex;
  align-items: center;
  height: 70px;
  line-height: 30px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  color: #222;
}
.cenText{
  width: 200px;
}
.icon{
  width: 40px;
  text-align: center;
}
.makeName{
  border: none;
  background: #2c85da;
  text-align: left;
}
</style>